/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

.nodata {
  position: absolute;
  top: 0;
  width: 100%;
  background-color: rgb(15, 24, 55);
  font-size: 30px;
  // min-height: 226px;
  height: 100%;
  font-weight: bold;
  color: rgb(83, 122, 247);
}

.player-wrapper {
  position: relative;
}

.full_bg_color {
  background-color: rgb(15, 24, 55);
}

.full {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 11;
  transition: all 0.5s linear;
}

.selectArea {
  position: absolute;
  width: 100%;
  height: 100%;
}

.full_header {
  position: absolute;
  top: 5%;
  width: 100%;
  z-index: 12;
  :global {
    .ant-row {
      width: 100%;
    }
  }
}

.breadcrumb {
  border-radius: 10px;
  padding: 10px;
  background-color: rgba(128, 128, 128, 0.8);
  :global {
    .ant-breadcrumb-link,
    .ant-breadcrumb-separator {
      color: #fff;
      font-size: 1vw;
    }
  }
}

.full_content {
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 12;
  background-color: rgb(15, 24, 55);
  :global {
    .ant-row {
      width: 100%;
    }
  }
}

.full_swiper {
  min-height: 20vh;
}

.swriperItem {
  height: 100%;
  background: rgb(9, 14, 45);
  margin: 20px;
  border: 1px solid rgb(24, 45, 83);
  border-radius: 10px;
}

.swriperItemVideo {
  padding: 15px;
  cursor: pointer;
  &_cover {
    position: relative;
    &_mask {
      width: 100%;
      height: 100%;
      z-index: 1;
      border-radius: 5px;
      position: absolute;
      background: rgba(0, 0, 0, 0.5);
      &::after {
        content: "";
        position: absolute;
        width: 100px;
        height: 100px;
        background-color: rgba(255, 255, 255, 0.5);
        background-image: url("../../../../assets/bigScreen/left.png");
        background-repeat: no-repeat;
        background-position: 45% 50%;
        transform: rotate(180deg);
        border-radius: 50px;
        top: calc(50% - 50px);
        left: calc(50% - 50px);
      }
    }
    &_imgWrapper {
      width: 100%;
      height: 100%;
      border-radius: 5px;
      overflow: hidden;
      img {
        filter: blur(2px);
        width: 100%;
        height: 100%;
        top: 0;
      }
    }
  }
  &_title {
    margin-top: 5px;
    font-size: 1vw;
    color: rgb(58, 70, 144);
  }
  :global {
    .ant-col {
      &:first-child {
        border-radius: 5px;
      }
    }
  }
}

.zoom_in {
  margin-right: 50px;
  cursor: pointer;
  width: 2vw;
  background-color: rgba(128, 128, 128, 0.8);
  padding: 5px;
  border-radius: 5px;
  img {
    width: 100%;
    height: 100%;
  }
}

.react-player {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

.failed {
  position: absolute;
  top: 0;
  width: 100%;
  height: 226px;
  background-color: rgb(15, 24, 55);
  font-size: 30px;
  font-weight: bold;
  color: rgb(83, 122, 247);
}

.title {
  padding: 20px;
  height: 24px;
  line-height: 24px;
  font-size: 20px;
  font-weight: 600;
}

.line {
  width: 4px;
  height: 20px;
  background: linear-gradient(to top, rgb(60, 124, 252), rgb(122, 190, 254));
  margin-right: 10px;
}

.titleText:extend(.fontStyle) {
  flex: 1;
  margin-top: 5px;
  :global {
    .ant-col {
      background-image: linear-gradient(to top, rgb(60, 124, 252), rgb(122, 190, 254));
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}

.fontStyle {
  background-image: linear-gradient(to top, rgb(60, 124, 252), rgb(122, 190, 254));
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.videoChannel {
  width: 100%;
  top: 15%;
  height: 95%;
  position: absolute;
  z-index: 12;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.1);
  :global {
    .ant-row {
      width: 100%;
      height: 100%;
    }
  }
  &_selectTitle {
    color: #fff;
    margin-left: 30px;
    margin-top: 20px;
    font-size: 1vw;
  }
}
